<template>
  <div class="page">
    <div class="margin-bottom-sm text-sm">
      <mt-cell title="九方子单号：">
        <mt-field
          placeholder="支持九方子单号/运单号混合查找"
          v-model="subWaybillNo"
          :disabled="isDisabled"
          ref="ref_1"
          :readonly="substatus ? false : 'readonly'"
          @keyup.enter.native="showFbaTrackNo"
        ></mt-field>
      </mt-cell>
      <mt-cell title="FBA箱号：">
        <mt-field
          placeholder="请录入FBA箱号"
          v-model="fbaNo"
          ref="ref_2"
          @keyup.enter.native="showFbaTrackNo"
        ></mt-field>
      </mt-cell>
      <mt-cell title="跟踪号：">
        <mt-field
          placeholder="请录入跟踪号"
          ref="ref_3"
          v-model="trackNo"
          @keyup.enter.native="showFbaTrackNo"
        ></mt-field>
        <mt-button
          style="font-size:12px"
          size="small"
          type="primary"
          @click="showFbaTrackNo"
          >查询</mt-button
        >
      </mt-cell>
    </div>

    <div class="flex margin-bottom-sm">
      <div class="flex-sub">
        <div class="showNum text-lg">
          {{ hasCount }}
        </div>
      </div>
      <div class="flex-twice text-lg flex justify-center flex-direction">
        <div>运单号：{{ waybillNo }}</div>
        <div>应扫描数：{{ count }}</div>
        <div>剩余数：{{ remainCount }}</div>
      </div>
    </div>

    <!-- <div>
      <mt-cell title="运单号：" :value="waybillNo"></mt-cell>
      <mt-cell title="渠道名称：" :value="customerChannelName"></mt-cell>
      <mt-cell title="目的国家：" :value="countryName"></mt-cell>
      <mt-cell title="客户简称：" :value="customerNameShort"></mt-cell>
      <mt-cell title="客户代码：" :value="customerCode"></mt-cell>
    </div> -->

    <el-card style="margin-top: 20px">
      <el-table :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号">
        </el-table-column>
        <el-table-column prop="hsubNumber" label="已扫FBA号"> </el-table-column>
        <el-table-column prop="htrackNo" label="已扫跟踪号"> </el-table-column>
      </el-table>
    </el-card>

    <div class="foot padding-lr-sm flex align-center justify-between">
      <mt-button type="primary" @click="saveAssociatFbaTrackNum"
        >保存</mt-button
      >
      <mt-button type="primary" @click="withdraw">撤回</mt-button>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { Toast } from "mint-ui";

export default {
  components: {},
  props: [],
  data() {
    return {
      subWaybills: [
        {
          subWaybillNo: "",
          hsubNumber: "",
          htrackNo: ""
        }
      ],
      subwaybill: {
        subWaybillNo: "",
        hsubNumber: "",
        htrackNo: ""
      },
      substatus: true,
      disable1: true,
      waybillNos: "",
      subWaybillNo: "",
      fbaNo: "",
      trackNo: "",
      remainCount: "",
      orderCount: "",
      waybillNo: "",
      customerChannelName: "",
      countryName: "",
      customerNameShort: "",
      customerCode: "",
      cursubNo: 1,
      count: 0,
      waybillId: "",
      hasCount: 0,
      fbaNoMap: {},
      trackNoMap: {},
      flag: 0
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initDat();
  },
  methods: {
    initDat() {
      this.subWaybills = [];
      this.$refs.ref_1.$refs.input.focus();
    },
    showFbaTrackNo() {
      if (this.count != 0 && this.cursubNo > this.count) {
        qiao.bs.alert("子单号已经全部扫描完毕！");
      }
      if (!this.isNotNull(this.waybillId)) {
        if (this.isNotNull(this.subWaybillNo) && this.disable1) {
          this.disable1 = false;
          this.searchSubWaybill(this.subWaybillNo);
        } else {
          Toast("请输入九方子单号或运单号查找！");
          this.disable1 = true;
        }
      } else {
        if (!this.isNotNull(this.fbaNo) && !this.isNotNull(this.trackNo)) {
          Toast("请录入FBA箱号或跟踪号！");
        } else if (
          this.isNotNull(this.fbaNo) &&
          !this.isNotNull(this.trackNo)
        ) {
          this.showFbaNo(this.fbaNo);
        } else if (
          !this.isNotNull(this.fbaNo) &&
          this.isNotNull(this.trackNo)
        ) {
          this.showTrackNo(this.trackNo);
        } else if (this.isNotNull(this.fbaNo) && this.isNotNull(this.trackNo)) {
          this.showFbaNo(this.fbaNo);
        }
      }
    },
    //显示跟踪号
    showTrackNo(noVal) {
      if (0 == noVal.length) {
        Toast("请输录入跟踪号！");
        this.$refs.ref_3.$refs.input.focus();
        return false;
      }
      var has = this.cursubNo in this.trackNoMap;
      if (!has) {
        this.trackNoMap[this.cursubNo] = noVal;
      }
      this.remainCount = --this.remainCount; // 剩余件数
      this.hasCount = ++this.hasCount; // 已经扫描件数
      if (this.cursubNo > this.count) {
        this.$message.success("子单号已经全部扫描完毕！");
        this.fbaNo = "";
        this.trackNo = "";
      }
      this.subwaybill.htrackNo = noVal;
      this.subWaybills.splice(this.cursubNo - 1, 1, this.subwaybill);
      this.flag = this.cursubNo - 1;
      this.cursubNo++;
      this.$refs.ref_2.$refs.input.focus();
      this.trackNo = "";
      this.subwaybill = {};
    },
    //显示FBA号
    showFbaNo(noVal) {
      if (0 == noVal.length) {
        Toast("请输录入跟踪号！");
        this.$refs.ref_2.$refs.input.focus();
        return false;
      }
      var has = this.cursubNo in this.fbaNoMap;
      if (!has) {
        this.fbaNoMap[this.cursubNo] = noVal;
      }
      this.subwaybill.subWaybillNo = this.subWaybills[
        this.cursubNo - 1
      ].subWaybillNo;
      this.subwaybill.hsubNumber = noVal;
      this.subWaybills.splice(this.cursubNo - 1, 1, this.subwaybill);
      this.flag = this.cursubNo - 1;
      this.fbaNo = "";
      this.$refs.ref_3.$refs.input.focus();
    },
    searchSubWaybill(subNoVal) {
      if (0 == subNoVal.length) {
        Toast("请输入九方子单号或运单号查找！");
        return false;
      }
      ajax("searchSubWaybill", { subNoVal: subNoVal }, { type: "mobile" })
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            if (data.error) {
              Toast(data.error);
            } else {
              this.count = data.count;
              this.remainCount = data.count;
              this.waybillId = data.waybillId;
              this.hasCount = 0;
              this.remainCount = data.count;

              this.waybillNo = data.waybillNo; // 运单号
              this.customerChannelName = data.customerChannelName; // 渠道名称
              this.countryName = data.countryName; // 国家
              this.customerNameShort = data.customerNameShort; // 客户简称
              this.customerCode = data.customerCode; // 客户代码
              var datas = data.subWaybills;
              for (var i in datas) {
                datas[i].subWaybillNo =
                  this.waybillNo + "_" + datas[i].subWaybillNo;
              }
              this.subWaybills = datas;
              this.$refs.ref_2.$refs.input.focus();
              this.substatus = false;
            }
          } else {
            this.disable1 = true;
            this.subWaybillNo = "";
            Toast("操作失败"+res.message);
          }
        })
        .catch(error => {
          this.disable1 = true;
          console.log(error);
          this.$router.push("/login");
        });
    },
    withdraw() {
      if (this.subWaybills[this.flag].hsubNumber) {
        if (this.subWaybills[this.flag].htrackNo) {
          if (this.hasCount > 0) {
            this.hasCount = --this.hasCount; // 已经扫描件数
          }
          if (this.remainCount < this.count) {
            this.remainCount = ++this.remainCount; // 剩余件数
          }
          // this.hasCount--;
          if (this.cursubNo > 1) {
            --this.cursubNo;
          }
        }
        this.$delete(this.subWaybills[this.flag], "hsubNumber");
        this.$delete(this.subWaybills[this.flag], "htrackNo");
        //this.$set(this.subWaybills[this.flag], 'hsubNumber', '');
        //this.$set(this.subWaybills[this.flag], 'htrackNo', '');
        this.$refs.ref_2.$refs.input.focus();
      }
    },
    saveAssociatFbaTrackNum() {
      if (!this.waybillId) {
        Toast("请先录入数据");
        this.$refs.ref_1.$refs.input.focus();
        return false;
      }
      if (this.count != this.hasCount) {
        Toast("已扫件数不等于应扫描件数");
        this.$refs.ref_1.$refs.input.focus();
        return false;
      }
      this.trackNoMap["waybillId"] = this.waybillId;
      var fbaNoStr = JSON.stringify(this.fbaNoMap);
      var trackNoStr = JSON.stringify(this.trackNoMap);
      ajax(
        "saveAssociatFbaTrackNum",
        {
          fbaNoStr: fbaNoStr,
          trackNoStr: trackNoStr
        },
        { type: "mobile" }
      )
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            Toast({
              message: "保存成功",
              iconClass: "icon icon-success"
            });
            location.reload();
          }else{
            Toast("操作失败"+res.message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    isNotNull(objStr) {
      if (
        objStr == "" ||
        objStr == null ||
        objStr == "null" ||
        objStr == "undefined" ||
        typeof objStr == "undefined"
      ) {
        return false;
      }
      if (objStr == undefined || typeof objStr == undefined) {
        return false;
      }
      if (typeof objStr == "object" && objStr.length < 1) {
        return false;
      }
      return true;
    }
  }
};
</script>
<style scoped>
.page >>> .mint-cell-value {
  flex: 2;
}

.page >>> .el-table th {
  font-size: 16px;
}
/deep/ .mint-button--small {
  padding: 0 8px;
}
</style>

<style lang="scss" scoped>
.page {
  padding-bottom: 50px;

  .showNum {
    border: 2px solid red;
    width: 2.5em;
    height: 2.5em;
    margin: 0 auto;
    line-height: 2.5em;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    color: red;
    font-size: 24px;
  }

  .foot {
    background: rgba(40, 44, 48, 1);
    padding: 4px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
